@import '../_config.scss';

.products-show {
  h1.title {
    font-size: 18px;
    margin-top: 0;
    color: #555;
  }
  .panel {
    border-radius: 0;

    .panel-body,
    .panel-heading {
      border: 0;
    }

    .panel-body {
      .imgs-col {
        .big-img {
          img {
            width: 100%;
            min-height: 440px;
          }
        }

        .img-list {
          margin-top: 10px;

          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-flow: row nowrap;

            li {
              margin-right: 10px;

              &:last-child {
                margin-right: 0;
              }

              img {
                width: 60px;
                height: 60px;
              }
            }
          }
        }
      }

      .infos-col {
        .title {
          h3 {
            margin-top: 0;
          }

          p {
            span {
              color: $color-normal;
            }
          }
        }

        .price {
          margin-bottom: 20px;

          h3 {
            font-size: 20px;
          }

          .pull-right {
            margin-top: 24px;
            .qrcode-logo {
              cursor: pointer;

              canvas {
                width: 20px;
                height: 20px;
              }

              &:hover {
                position: absolute;
                padding: 30px;
                border: 1px solid $color-border;
                background-color: $color-default;

                canvas {
                  width: 100px;
                  height: 100px;
                }
                top: 40px;
                right: 15px;
              }
            }
          }

          h3 {
            color: red;

            small {
              color: $color-normal;
            }

          }
        }

        .power-list {
          border-radius: 0;
          margin-bottom: 20px;

          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;

            li {
              padding: 5px 0;

              .dot {
                display: inline-block;
                vertical-align: middle;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: $color-private;
              }
              color: $color-normal;
            }
          }
        }

        .info-row {
          .row {
            margin-top: 5px;
            margin-bottom: 5px;

            .count {
              width: 50px;
            }
          }

          .shared-footer{
            margin-top: 20px;

            .qrcode-div, .share-links-div{
              position: relative;
              cursor: pointer;
              i{
                color: $color-private;
              }

              .qrcode{
                position: absolute;
                top: 0;
                left: 60%;
                display: none;
                z-index: 10;
              }

              .share-links{
                position: absolute;
                top: -5px;
                width: 100%;
                left: 50%;
                display: none;
              }
            }

            .qrcode-div:hover{
              color: $color-private;
              .qrcode{
                display: inherit;
              }
            }
            .share-links-div:hover{
              color: $color-private;
              .share-links{
                display: inherit;
              }
            }
          }

          .btns-row {
            margin-top: 20px;
          }

          .total-price{
            margin-top: 10px;
          }
        }

        .detail-row {
          ul {}
        }

        .info-col{
          >div{
            margin-top: 10px;
          }

          .new-price{
            font-size: 18px;
          }

          .mid-line {
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .detail-panel {
    border: 0;

    .panel-heading {
      border-bottom: 1px solid $color-border;
      padding-top: 0;
      padding-bottom: 0;
      background-color: #F6F9FB;
      border: 0;
    }

    .nav-pills {
      li {
        a {
          &,
          &:active,
          &:focus,
          &:hover {
            background-color: #F6F9FB;
            color: $color-title;
            border-radius: 0;
            padding-top: 20px;
            padding-bottom: 20px;
          }
        }

        &.active {
          a {
            box-shadow: inset 0 -3px 0 $color-private;
          }
        }
      }
    }
  }

  .right-slider{
    h3.related {
      font-size: 14px;
      text-align: center;
      color: $color-normal;
      margin-top: 0;
    }
    .item{
      margin-top: 10px;
      margin-bottom: 10px;
    }
    a{
      &, &:hover, &:focus, &:active{
        color: $color-normal;
        text-decoration: none;
      }
      &:hover{
        color: $color-private;
      }
    }
    img{
      width: 100%;
      height: 140px;
      margin-bottom: 5px;
    }
    .cut-title{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: block-axis;
      height: 20px;
      line-height: 20px;
    }
  }

  .product-detail-panel-body{
    p{
      margin: 0 !important;
    }
  }

}

.mobile-product-show{
  padding-bottom: 60px;
  padding-bottom: 16vw;
/*   .mobile-product-show-menu{
  height: 60px;
  height: 16vw;
  background-color: #fff;
  box-shadow: 0 -6px 13px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 -1.6vw 3.5vw 0 rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
  width: 100%;
} */
  .product-tab-panel{
    p{
      margin: 0 !important;
    }
  }

  .product-carousel{
      height: 180px;
      height: 100vw;
      width: 100%;
      width: 100vw;
      background-color: $color-bg;
  }

  .product-info{
    padding: 10px 15px;
    padding: 2.66vw 4vw;

    .title, .price, .infos{
      margin: 0;
    }

    .title{
      font-size: 15px;
      font-size: 4vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-bottom: 10px;
      padding-bottom: 2.66vw;
      color: #222222;
    }

    .price{
      font-size: 18px;
      font-size: 4.8vw;
      padding-bottom: 10px;
      padding-bottom: 2.66vw;
    }

    .infos{
      display: flex;
      flex-flow: row nowrap;

      span{
        display: block;
        font-size: 12px;
        font-size: 3.2vw;
        &:first-child{
          margin-right: 15px;
          margin-right: 4vw;
        }
      }
    }
  }

  .line{
    margin: 0;
    border-width: 10px;
    border-width: 2.66vw;
  }

  .product-content{
    padding: 10px 15px;
    padding: 2.66vw 4vw;

    .good-item{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .dot{
        margin-right: 15px;
        margin-right: 4vw;
        display: block;
        width: 5px;
        height: 5px;
        width: 1.33vw;
        height: 1.33vw;
        border-radius: 50%;
        background-color: $color-private;
      }
    }

    hr{
      margin-top: 10px;
      margin-top: 2.66vw;
      margin-bottom: 10px;
      margin-bottom: 2.66vw;
    }
  }

  .product-tabs{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    background-color: $color-new-bg;

    .tab-link{
      text-align: center;
      width: 33.3%;
      padding: 12px 0;
      padding: 3.2vw 0;
      color: #767676;
      font-size: 12px;
      font-size: 3.2vw;

      &.active{
        color: #222222;
        box-shadow: inset 0px -4px 0px #37ca73;
      }
    }
  }

  .product-tab-panel{
    width: 100%;
    p{
      width: 100%;

      img{
        width: 100%;
      }
    }
  }
}
